<template>
  <el-table
    height="100%"
    :data="projects"
    style="width: 100%"
    @row-click="handleRowClick"
    :show-header="false"
  >
    <el-table-column prop="name" label="名称" />
  </el-table>

  <el-pagination
    :current-page="currentPage"
    :page-size="pageSize"
    :total="total"
    layout="total, prev, pager, next"
    @size-change="handleSizeChange"
    @current-change="handleCurrentChange"
  />
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';
import { projectService } from '@/services/business/project.service';
import type { Project } from '@/types/business/project';

const currentPage = ref(1);
const projects = ref<Project[]>([]);
const pageSize = ref(10);
const total = ref(0);

const emit = defineEmits(['select']);

const fetchProjects = async () => {
  const response = await projectService.getProjects(currentPage.value, pageSize.value);
  projects.value = response.records;
  total.value = response.total;
};

const handleRowClick = (row: Project) => {
  emit('select', row);
};

const handleSizeChange = (val: number) => {
  pageSize.value = val;
  fetchProjects();
};

const handleCurrentChange = (val: number) => {
  currentPage.value = val;
  fetchProjects();
};

onMounted(() => {
  fetchProjects();
});
</script>
